<template>
  <div class="payment-box">
    <Hander></Hander>

    <div class="content-box">
      <div class="box-bg">
        <UserHand />

        <div class="bg-content">
          <div class="content-title">
            <div class="title-icon"></div>
            设备报损
          </div>
        </div>

        <div class="content-main">
          <div class="main-onebox">
            <div class="onebox-title">设备地址：{{ devData.location }}</div>
            <div class="title-tag mt12">已完成</div>
          </div>
          <div class="onebox-title mt12">
            设备类型：
            {{
              devData.deviceType == 1
                ? "插板"
                : devData.deviceType == 2
                ? "吹风机"
                : "未知"
            }}
          </div>
          <div class="onebox-title mt12">问题描述：</div>
          <van-field
            class="mt12"
            style="background: #f3f5f9; border-radius: 0.33rem"
            border
            v-model="formData.repairNotes"
            type="textarea"
            placeholder="请输入"
            @blur="handleMoney"
          />
          <!-- <div class="uplode">
            附件：
            <van-uploader
              :max-count="1"
              v-model="fileList"
              multiple
              :after-read="afterRead"
            />
          </div> -->

          <van-button
            style="margin-top: 40px"
            block
            round
            :loading="loading"
            color="#47BC91"
            @click="upData"
            >立即上报
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";

import { useRoute, useRouter } from "vue-router";

import Hander from "@/components/hander.vue";
import UserHand from "@/components/userHand.vue";

import {
  baseUrl,
  devicesfindById,
  repairwechatadd,
  repairsimages,
} from "@/api/index.js";

const route = useRoute();
const router = useRouter();

import { useCounterStore } from "@/stores/counter";
const counterStore = useCounterStore();
// 读取 userInfo（响应式）
const userInfo = computed(() => counterStore.userInfo);

console.log(userInfo.value);

const fileList = ref([
  // { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  // { url: "https://cloud-image", isImage: true },
]);

//上传图片
const afterRead = async (file) => {
  file.status = "uploading";
  file.message = "上传中...";
  try {
    const formDataup = new FormData();
    formDataup.append("files", file.file);
    let res = await repairsimages(formDataup);
    if (res.code == 200) {
      console.log(res.data[0]);
      console.log(baseUrl);

      // res.data.forEach((element) => {
      //   fileList.value.push({
      //     url: baseUrl + element,
      //   });
      // });

      formData.value.images = baseUrl + res.data[0];
      file.status = "done";
    } else {
      file.status = "failed";
      file.message = "上传失败";
    }
  } catch (error) {
    console.error("上传出错:", error);
    file.status = "failed";
    file.message = "上传失败";
  }
};

//立即上报
let formData = ref({});

let loading = ref(false);
const upData = async () => {
  if (!formData.value.repairNotes) {
    return showToast("描述不能为空");
  }
  try {
    loading.value = true;
    formData.value.deviceId = route.query.id;
    formData.value.repairAccount = userInfo.value.account;
    formData.value.repairPhone = userInfo.value.phone;
    formData.value.repairName = userInfo.value.name;
    formData.value.repairType = userInfo.value.userType;
    let res = await repairwechatadd(formData.value);

    if (res.code == 200) {
      loading.value = false;

      showSuccessToast("成功上报");

      router.go(-1);
    }
  } catch (error) {
    loading.value = false;
  }
};

//获取设备详情
let devData = ref({});
const getdevicesfindById = async (deviceId) => {
  try {
    let res = await devicesfindById({
      deviceId,
    });
    devData.value = res.data;
  } catch (error) {}
};

onMounted(() => {
  if (route.query.id) {
    getdevicesfindById(route.query.id);
  }
});
</script>
<style scoped lang="scss">
.payment-box {
  width: 100%;
  height: 100vh;
  background: #47bc91;

  .content-box {
    width: 100%;
    height: calc(100vh - 130px);
    box-sizing: border-box;
    padding: 0 12px;
    position: relative;
    z-index: 1;

    .box-bg {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      height: 100%;

      box-sizing: border-box;
      padding: 0 12px;

      .bg-content {
        .content-title {
          display: flex;
          align-items: center;

          font-weight: bold;
          font-size: 16px;
          color: #151515;

          .title-icon {
            width: 4px;
            height: 21px;
            background: #47bc91;
            border-radius: 2px;
            margin-right: 4px;
          }
        }
      }

      .content-main {
        margin-top: 27px;
        .main-onebox {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .onebox-title {
          font-weight: 400;
          font-size: 14px;
          color: #191919;
        }

        .mt12 {
          margin-top: 12px;
        }
        .mb12 {
          margin-top: 12px;
        }

        .title-tag {
          font-weight: 400;
          font-size: 11px;
          color: #47ba7f;
          box-sizing: border-box;
          padding: 3px 9px;
          background-color: #dffff4;
        }

        .uplode {
          font-weight: 400;
          font-size: 14px;
          color: #191919;
          margin-top: 12px;

          display: flex;
          align-items: flex-start;
        }
      }
    }
  }
}
</style>
